<template>
  <div class="to-do-list-wrapper" ref="todoRef">
    <a-alert type="info" show-icon v-if="category==='待办'">
      <template slot="icon">
        <a-icon type="alert" style="vertical-align:top;" />
      </template>
      <span slot="message">
        您今天还有<span style="color:#f5222d;padding:0 4px;"> {{inCompelete()}} </span>项工作未完成
      </span>
    </a-alert>
    <div class="table-box">
      <table class="table">
        <thead class="t-head">
          <tr>
            <th style="width: 5%;" class="empty"></th>
            <th style="width: 5%;">操作</th>
            <th style="width: 20%;">流程名称</th>
            <th style="width: 10%;">流程状态</th>
            <th style="width: 10%;">所属项目</th>
            <th style="width: 10%;">流程发起人</th>
            <th style="width: 10%;">当前审批人</th>
            <th style="width: 15%;">角色</th>
            <th style="width: 15%;">到达时间</th>
          </tr>
        </thead>
        <tbody class="t-body">
          <template v-for="(item,key) in mapTodoDataObj">
            <tr class="group-title" :key="key+'1'">
              <td>
                <div class="first-col">
                  <a-icon
                    :type="collapseStatus[key]?'minus-square':'plus-square'"
                    class="collapse-icon"
                    @click="toggleCollapsed(key)" />
                </div>
              </td>
              <td colspan="8">
                <span class="title">{{key}}</span>
                <span class="more" @click="showMore(key)">
                  <!-- <a-icon type="ellipsis" class="icon" />更多 -->
                  <a-tooltip>
                    <template slot="title">
                      <div>
                        更多
                      </div>
                    </template>
                    <a-badge :count="item.length" :offset="[item.length>9?10:0,-3]" :overflowCount="10000">
                      <a-icon type="ellipsis" class="icon" />
                    </a-badge>
                  </a-tooltip>
                </span>
              </td>
            </tr>
            <template v-for="(trData) in sliceTop(item)">
              <tr class="group-row" v-show="collapseStatus[key]" :key="trData.link">
                <td>
                  <div class="first-col">
                    <a-checkbox></a-checkbox>
                  </div>
                </td>
                <td>
                  <div class="operation" @click="goto(trData, 'link')">
                    {{trData.ext1}}
                  </div>
                </td>
                <td>
                  <div class="process-name" @click="goto(trData, 'titleLink')">
                    <a-tooltip>
                      <template slot="title">
                        <div style="">
                          {{trData.title}}
                        </div>
                      </template>
                      {{trData.title}}
                    </a-tooltip>
                  </div>
                </td>
                <td>
                  <div class="process-state">
                    {{trData.status}}
                  </div>
                </td>
                <td>
                  <div class="pro" @click="goto(trData, 'contextOid')">
                    {{trData.context}}
                  </div>
                </td>
                <td>
                  <div class="sponsor">
                    {{trData.creator}}
                  </div>
                </td>
                <td>
                  <div class="approved">
                    {{trData.processor}}
                  </div>
                </td>
                <td>
                  <div class="role">
                    {{trData.ext5}}
                  </div>
                </td>
                <td>
                  <div class="arrivetime">
                    {{trData.receivingTime}}
                  </div>
                </td>
              </tr>
            </template>
          </template>
          <!-- <template v-for="(item,index) in todoList">
            <tr class="group-title" :key="index+'1'">
              <td>
                <div class="first-col">
                  <a-icon
                    :type="item.collapsed?'minus-square':'plus-square'"
                    class="collapse-icon"
                    @click="toggleCollapsed(index)" />
                </div>
              </td>
              <td colspan="8">
                <span class="title">{{item.title}}</span>
                <span class="more" @click="showMore(item)">
                  <a-icon type="ellipsis" class="icon" />更多
                </span>
              </td>
            </tr>
            <tr class="group-row" v-show="item.collapsed" :key="index+'2'">
              <td>
                <div class="first-col">
                  <a-checkbox></a-checkbox>
                </div>
              </td>
              <td>PMO检查</td>
              <td>评审-泵送30m</td>
              <td>进行中</td>
              <td>泵送30m项目</td>
              <td>张三</td>
              <td>张三</td>
              <td>检查</td>
              <td>2021-04-09</td>
            </tr>
          </template> -->
        </tbody>
      </table>
    </div>
    <more-modal
     :visible="modalStatus"
     :title="modalTitle"
     :dataList="todoDataObj[modalTitle]"
     @cancel="cancelMore"
     :getContainer="getContainer">
    </more-modal>
  </div>
</template>
<script>
import MoreModal from './MoreModal'
export default {
  name: 'ToDoList',
  props: {
    category: {
      type: String,
      default: ''
    },
    workSpaceItem: {
      type: Object,
      defualt: () => ({})
    },
    todoDataObj: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      collapseStatus: {},
      modalStatus: false,
      modalTitle: ''
    }
  },
  computed: {
    mapTodoDataObj () {
      if (this.workSpaceItem.personalConfig) {
        let contentSortList = this.workSpaceItem.personalConfig.contentSortList
        let obj = {}
        contentSortList.forEach(item => {
          if (this.todoDataObj[item.contentId]) {
            obj[item.contentId] = this.todoDataObj[item.contentId]
          }
        })
        if (Object.keys(obj).length === 0) {
          return this.todoDataObj
        }
        return obj
      } else {
        return this.todoDataObj
      }
    }
  },
  components: {
    MoreModal
  },
  methods: {
    getContainer () {
      return this.$refs.todoRef
    },
    sliceTop (arr) {
      if (this.workSpaceItem.personalConfig && this.workSpaceItem.personalConfig.hasOwnProperty('num')) {
        return arr.slice(0, this.workSpaceItem.personalConfig.num)
      }
      return arr.slice(0, 3)
    },
    inCompelete () {
      let keys = Object.keys(this.todoDataObj)
      let length = 0
      keys.forEach(key => {
        length += this.todoDataObj[key].length
      })
      return length
    },
    toggleCollapsed (key) {
      this.$set(this.collapseStatus, key, !this.collapseStatus[key])
    },
    goto (item, field) {
      if (!item[field]) {
        return this.$message.warning('目标地址不存在')
      }
      if (field === 'link' || field === 'titleLink') {
        window.open(item[field])
      }
      if (field === 'contextOid') {
        let oid = item[field].split(':')[2]
        this.$router.push({
          path: '/single/projectMain',
          query: {
            oid
          }
        })
      }
    },
    showMore (key) {
      this.modalStatus = true
      this.modalTitle = key
    },
    cancelMore () {
      this.modalStatus = false
    },
  },
  watch: {
    todoDataObj: {
      handler: function () {
        let keys = Object.keys(this.todoDataObj)
        keys.forEach(key => {
          this.$set(this.collapseStatus, key, true)
        })
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="less" scoped>
.to-do-list-wrapper {
  .ant-alert-info {
    background-color: #e3ecff;
    border: 1px solid #a3b7ea;
  }
  .table-box {
    margin-top: 10px;
    overflow: auto;
    .table {
      width: 100%;
      max-width: 100%;
      th,td {
        padding: 12px 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .t-head {
        th.empty {
          padding: 10px 15px;
        }
        th {
          background-color: #f7f7f7;
          color: #525252;
          border: 1px solid #eeeeee;
          border-left-color: transparent;
          border-right-color: transparent;
        }
      }
      .t-body {
        td {
          border-top: 1px solid #eeeeee;
          border-bottom: 1px solid #eeeeee;
          .first-col {
            text-align: center;
          }
        }
        .group-title {
          border-bottom: 1px solid #eeeeee;
          .collapse-icon {
            cursor: pointer;
            color: #1890ff;
            font-size: 16px;
          }
          .title  {
            margin-right:10px;
            font-size: 15px;
            // font-weight: bold;
          }
          .more {
            cursor: pointer;
            .icon {
              // border:1px solid #969696;
              // border-radius:50%;
              font-size: 20px;
              margin-right:6px;
              vertical-align: middle;
            }
          }
        }
        .group-row {
          div {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          // .operation {
          //   width: 50px;
          // }
          .operation,.process-name,.pro {
            max-width: 250px;
            color: #386bd7;
            &:hover {
              cursor: pointer;
            }
          }
          // .process-state {
          //   width: 50px;
          // }
          // .pro {
          //   width: 50px;
          // }
          // .sponsor {
          //   width: 50px;
          // }
          // .approved {
          //   width: 50px;
          // }
          // .role {
          //   width: 50px;
          // }
          // .arrivetime {
          //   width: 50px;
          // }
        }
        .group-row:hover {
          background-color: #f0f7ff;
          // color: #386bd7;
        }
      }
    }
  }
}
</style>